<template>
  <div class="systemSetup">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="left_box box-card">
          <h3 class="title">
            <el-icon style="margin-right: 10px">
              <Setting />
            </el-icon>
            首页展示设置
          </h3>
          <div class="content">
            <h4 class="text-color">首页置顶文章（单选）</h4>
            <p class="text-color">提示：1、不选择则不显示置顶文章。</p>
            <el-select-v2
              v-model="stickArticleValue"
              :options="articleInfo"
              placeholder="请选择首页置顶文章"
              style="width: 100%"
              clearable="true"
              value-key="label"
              size="large"
            >
              <template #default="{ item }">
                <span style="margin-right: 8px">{{ item.label }}</span>
                <span style="font-size: 13px; color: var(--el-text-color-secondary)">
                  {{ item.value }}
                </span>
              </template>
            </el-select-v2>
          </div>
          <div class="content">
            <h4 class="text-color">首页文章展示（多选）</h4>
            <p class="text-color">提示：1、最多选择10条数据。</p>
            <el-select-v2
              v-model="allArticleValue"
              :options="articleInfo"
              placeholder="请选择首页文章展示【10篇】"
              style="width: 100%"
              multiple
              value-key="label"
              :multiple-limit="10"
              clearable="true"
              size="large"
            >
              <template #default="{ item }">
                <span style="margin-right: 8px">{{ item.label }}</span>
                <span style="font-size: 13px; color: var(--el-text-color-secondary)">
                  {{ item.value }}
                </span>
              </template>
            </el-select-v2>
          </div>
          <div class="content">
            <h4 class="text-color">左侧精选文章（多选）</h4>
            <p class="text-color">提示：1、最多选择8条数据。2、选中的第一条文章为封面文章</p>
            <el-select-v2
              v-model="featuredArticleValue"
              :options="articleInfo"
              placeholder="请选择首页左侧精选文章【8篇】"
              style="width: 100%"
              multiple
              value-key="label"
              :multiple-limit="8"
              clearable="true"
              size="large"
            >
              <template #default="{ item }">
                <span style="margin-right: 8px">{{ item.label }}</span>
                <span style="font-size: 13px; color: var(--el-text-color-secondary)">
                  {{ item.value }}
                </span>
              </template>
            </el-select-v2>
          </div>
          <div class="content">
            <h4 class="text-color">左侧技术专区文章（多选）</h4>
            <p class="text-color">提示：1、最多选择10条数据。</p>
            <el-select-v2
              v-model="technologyArticleValue"
              :options="technologyArticleInfo"
              placeholder="请选择首页左侧技术专区文章【10篇】"
              style="width: 100%"
              multiple
              value-key="label"
              :multiple-limit="10"
              clearable="true"
              size="large"
            >
              <template #default="{ item }">
                <span style="margin-right: 8px">{{ item.label }}</span>
                <span style="font-size: 13px; color: var(--el-text-color-secondary)">
                  {{ item.value }}
                </span>
              </template>
            </el-select-v2>
          </div>
          <div class="content">
            <h4 class="text-color">右侧资源专区文章（多选）</h4>
            <p class="text-color">提示：1、最多选择10条数据。2、选中的第一条文章为封面文章</p>
            <el-select-v2
              v-model="resourceArticleValue"
              :options="resourceArticleInfo"
              placeholder="请选择首页右侧资源专区文章【10篇】"
              style="width: 100%"
              multiple
              value-key="label"
              :multiple-limit="10"
              clearable="true"
              size="large"
            >
              <template #default="{ item }">
                <span style="margin-right: 8px">{{ item.label }}</span>
                <span style="font-size: 13px; color: var(--el-text-color-secondary)">
                  {{ item.value }}
                </span>
              </template>
            </el-select-v2>
          </div>
          <div class="content">
            <h4 class="text-color">左侧广告1</h4>
            <h5 class="text-color">广告图</h5>
            <p class="text-color">提示：点击上传的图片地址由系统生成，修改会导致图片失效</p>
            <el-input size="large" v-model="advertisingImg1" placeholder="请点击上传图片或手动输入图片地址">
              <template #append>
                <el-upload
                  ref="uploadEle"
                  class="upload-demo"
                  :action="uploadURL"
                  :on-success="handleAvatarSuccess1"
                  :before-upload="beforeUploadFunction"
                  :show-file-list="false"
                >
                  <template #trigger>
                    <el-button style="width: 100px">上传图片</el-button>
                  </template>
                </el-upload>
              </template>
            </el-input>
            <h5 class="text-color">广告链接</h5>
            <p class="text-color">提示：链接必须包含http或者https</p>
            <el-input size="large" v-model="advertisingLink1" placeholder="请输入广告链接" />
          </div>
          <div class="content">
            <h4 class="text-color">右侧广告1</h4>
            <h5 class="text-color">广告图</h5>
            <p class="text-color">提示：点击上传的图片地址由系统生成，修改会导致图片失效</p>
            <el-input size="large" v-model="advertisingImg2" placeholder="请点击上传图片或手动输入图片地址">
              <template #append>
                <el-upload
                  ref="uploadEle"
                  class="upload-demo"
                  :action="uploadURL"
                  :on-success="handleAvatarSuccess2"
                  :before-upload="beforeUploadFunction"
                  :show-file-list="false"
                >
                  <template #trigger>
                    <el-button style="width: 100px">上传图片</el-button>
                  </template>
                </el-upload>
              </template>
            </el-input>
            <h5 class="text-color">广告链接</h5>
            <p class="text-color">提示：链接必须包含http或者https</p>
            <el-input size="large" v-model="advertisingLink2" placeholder="请输入广告链接" />
          </div>
          <div class="content">
            <h4 class="text-color">右侧广告2</h4>
            <h5 class="text-color">广告图</h5>
            <p class="text-color">提示：点击上传的图片地址由系统生成，修改会导致图片失效</p>
            <el-input size="large" v-model="advertisingImg3" placeholder="请点击上传图片或手动输入图片地址">
              <template #append>
                <el-upload
                  ref="uploadEle"
                  class="upload-demo"
                  :action="uploadURL"
                  :on-success="handleAvatarSuccess3"
                  :before-upload="beforeUploadFunction"
                  :show-file-list="false"
                >
                  <template #trigger>
                    <el-button style="width: 100px">上传图片</el-button>
                  </template>
                </el-upload>
              </template>
            </el-input>
            <h5 class="text-color">广告链接</h5>
            <p class="text-color">提示：链接必须包含http或者https</p>
            <el-input size="large" v-model="advertisingLink3" placeholder="请输入广告链接" />
          </div>
          <!-- 首页右上角图片 -->
          <div class="content">
            <h4 class="text-color">首页右上角图片</h4>
            <!-- <h5 class="text-color">广告图</h5> -->
            <p class="text-color">提示：点击上传的图片地址由系统生成，修改会导致图片失效</p>
            <el-input size="large" v-model="advertisingImg4" placeholder="请点击上传图片或手动输入图片地址">
              <template #append>
                <el-upload
                  ref="uploadEle"
                  class="upload-demo"
                  :action="uploadURL"
                  :on-success="handleAvatarSuccess4"
                  :before-upload="beforeUploadFunction"
                  :show-file-list="false"
                >
                  <template #trigger>
                    <el-button style="width: 100px">上传图片</el-button>
                  </template>
                </el-upload>
              </template>
            </el-input>
          </div>
          <div class="content">
            <h4 class="text-color">首页背景图片</h4>
            <!-- <h5 class="text-color">广告图</h5> -->
            <p class="text-color">提示：点击上传的图片地址由系统生成，修改会导致图片失效</p>
            <el-input size="large" v-model="advertisingImg5" placeholder="请点击上传图片或手动输入图片地址">
              <template #append>
                <el-upload
                  ref="uploadEle"
                  class="upload-demo"
                  :action="uploadURL"
                  :on-success="handleAvatarSuccess5"
                  :before-upload="beforeUploadFunction"
                  :show-file-list="false"
                >
                  <template #trigger>
                    <el-button style="width: 100px">上传图片</el-button>
                  </template>
                </el-upload>
              </template>
            </el-input>
          </div>
          <h3 class="title">
            <el-icon style="margin-right: 10px">
              <Setting />
            </el-icon>
            网站特效设置
          </h3>
          <div class="content">
            <h4 class="text-color">特效1：点击网站页面显示24字核心价值观上升</h4>
            <el-select v-model="effects01" placeholder="请选择特效1状态" size="large" style="width: 100%">
              <el-option label="关闭" value="0" />
              <el-option label="开启" value="1" />
            </el-select>
          </div>
          <div class="content">
            <h4 class="text-color">特效2：彩片飘落效果</h4>
            <el-select v-model="effects02" placeholder="请选择特效2状态" size="large" style="width: 100%">
              <el-option label="关闭" value="0" />
              <el-option label="开启" value="1" />
            </el-select>
          </div>
          <div class="content">
            <h4 class="text-color">特效3：网站黑白色</h4>
            <el-select v-model="effects03" placeholder="请选择特效3状态" size="large" style="width: 100%">
              <el-option label="关闭" value="0" />
              <el-option label="开启" value="1" />
            </el-select>
          </div>
          <div class="content">
            <h4 class="text-color">特效4：欢度新春灯笼</h4>
            <el-select v-model="effects04" placeholder="请选择特效4状态" size="large" style="width: 100%">
              <el-option label="关闭" value="0" />
              <el-option label="开启" value="1" />
            </el-select>
          </div>
          <div class="content" style="text-align: center">
            <el-button plain color="#2fa7b9" @click="leftSaveSettings">保存设置</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { ref, toRefs, reactive, onMounted, watch } from "vue";
import { ElMessage, ElNotification, ElMessageBox } from "element-plus";
import { getAllArticleInfo, getSystemSetup, updateSystemSetup } from "@/api/modules/allApi";
/**
 * @desc 加载获取数据
 */
const loadData = async () => {
  const { data } = await getAllArticleInfo();
  const { data: SystemData } = await getSystemSetup();

  // 全部文章信息
  data.forEach(element => {
    state.articleInfo.unshift({
      value: element.articleId,
      label: element.articleTitle
    });
  });
  // // 技术文章信息
  data.forEach(element => {
    if (element.articleClassifyId == 1) {
      state.technologyArticleInfo.unshift({
        value: element.articleId,
        label: element.articleTitle
      });
    }
  });
  // // 资源文章信息
  data.forEach(element => {
    if (element.articleClassifyId == 2) {
      state.resourceArticleInfo.unshift({
        value: element.articleId,
        label: element.articleTitle
      });
    }
  });
  // 查询系统设置
  state.stickArticleValue = SystemData.stickArticle;
  state.allArticleValue = JSON.parse(SystemData.allArticle);
  state.featuredArticleValue = JSON.parse(SystemData.featuredArticle);
  state.technologyArticleValue = JSON.parse(SystemData.technologyArticle);
  state.resourceArticleValue = JSON.parse(SystemData.resourceArticle);
  state.advertisingImg1 = SystemData.advertising1;
  state.advertisingLink1 = SystemData.advertisingLink1;
  state.advertisingImg2 = SystemData.advertising2;
  state.advertisingLink2 = SystemData.advertisingLink2;
  state.advertisingImg3 = SystemData.advertising3;
  state.advertisingLink3 = SystemData.advertisingLink3;
  state.advertisingImg4 = SystemData.advertising4;
  state.advertisingImg5 = SystemData.advertising5;
  // 网站特效设置
  state.effects01 = SystemData.effects01.toString();
  state.effects02 = SystemData.effects02.toString();
  state.effects03 = SystemData.effects03.toString();
  state.effects04 = SystemData.effects04.toString();
  console.log("state.effects01", state.effects01);
};

//挂载后加载数据
onMounted(() => {
  loadData();
});
const state = reactive({
  // 文章信息
  articleInfo: [],
  // 置顶文章
  stickArticleValue: "",
  // 十篇文章展示
  allArticleValue: [],
  // 左侧精选文章
  featuredArticleValue: [],
  // 技术专区的文章信息
  technologyArticleInfo: [],
  // 左侧技术专区文章
  technologyArticleValue: [],
  // 资源专区的文章信息
  resourceArticleInfo: [],
  // 右侧资源专区文章
  resourceArticleValue: [],
  // 广告
  advertisingImg1: "",
  advertisingLink1: "",
  advertisingImg2: "",
  advertisingLink2: "",
  advertisingImg3: "",
  advertisingLink3: "",
  advertisingImg4: "",
  advertisingImg5: "",
  // 网站特效
  effects01: "", // 特效1
  effects02: "", // 特效2
  effects03: "", // 特效3
  effects04: "", // 特效4
  // 广告上传到服务器的路径
  uploadURL: import.meta.env.VITE_API_URL + "upload/advertisingImgUpload"
});

// 图片上传格式、大小要求
const beforeUploadFunction = (rawFile: any) => {
  if (
    rawFile.type !== "image/jpeg" &&
    rawFile.type !== "image/jpg" &&
    rawFile.type !== "image/png" &&
    rawFile.type !== "image/gif"
  ) {
    ElMessage.error("仅支持图片格式.png | .jpg | .jpeg | .gif ");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 5) {
    ElMessage.error("仅支持大小不超过5MB的图片!");
    return false;
  }
  return true;
};

// 图片上传成功后执行的函数
const handleAvatarSuccess1 = (response: any) => {
  state.advertisingImg1 = response.data;
};
const handleAvatarSuccess2 = (response: any) => {
  state.advertisingImg2 = response.data;
};
const handleAvatarSuccess3 = (response: any) => {
  state.advertisingImg3 = response.data;
};
const handleAvatarSuccess4 = (response: any) => {
  state.advertisingImg4 = response.data;
};
const handleAvatarSuccess5 = (response: any) => {
  state.advertisingImg5 = response.data;
};

// 保存首页展示设置
const leftSaveSettings = () => {
  const params = {
    stickArticle: state.stickArticleValue, // '置顶',
    allArticle: "[" + state.allArticleValue + "]", // '文章展示',
    featuredArticle: "[" + state.featuredArticleValue + "]", // '左侧精选文章',
    technologyArticle: "[" + state.technologyArticleValue + "]", // '左侧技术专区文章',
    resourceArticle: "[" + state.resourceArticleValue + "]", // '右侧资源专区文章',
    advertising1: state.advertisingImg1, // '左侧广告图1',
    advertisingLink1: state.advertisingLink1, // '左侧广告链接1',
    advertising2: state.advertisingImg2, // '右侧广告图1',
    advertisingLink2: state.advertisingLink2, // '左侧广告链接1',
    advertising3: state.advertisingImg3, // '右侧广告图2',
    advertisingLink3: state.advertisingLink3, // '左侧广告链接1'
    advertising4: state.advertisingImg4, // '首页右上角',
    advertising5: state.advertisingImg5, // '首页右上角',

    effects01: state.effects01.toString(), // 特效1
    effects02: state.effects02.toString(), // 特效2
    effects03: state.effects03.toString(), // 特效2
    effects04: state.effects04.toString() // 特效2
  };
  updateSystemSetup(params).then(res => {
    if (res.code == 0) {
      loadData();
      ElMessage({
        message: "保存成功",
        type: "success"
      });
      // 刷新界面
    }
  });
};
const {
  articleInfo,
  stickArticleValue,
  allArticleValue,
  featuredArticleValue,
  technologyArticleInfo,
  technologyArticleValue,
  resourceArticleInfo,
  resourceArticleValue,
  advertisingImg1,
  advertisingImg2,
  advertisingImg3,
  advertisingImg4,
  advertisingImg5,
  advertisingLink1,
  advertisingLink2,
  advertisingLink3,
  effects01,
  effects02,
  effects03,
  effects04,
  uploadURL
} = toRefs(state);
</script>

<style lang="scss">
.systemSetup .el-col {
  margin-bottom: 20px;
}
.systemSetup .title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  margin-bottom: 10px;
  color: #2fa7b9;
}
.left_box {
  /* 添加此属性 padding间距不扩大div */
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 20px;
  background: white;
}
.right_box {
  /* 添加此属性 padding间距不扩大div */
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 20px;
  background: white;
}
.systemSetup .content {
  /* 添加此属性 padding间距不扩大div */
  box-sizing: border-box;
  width: 100%;
  padding: 10px 20px;
}
.systemSetup .content h4 {
  color: #333333;
}
.systemSetup .content h5 {
  font-size: 15px;
  font-weight: lighter;
  line-height: 35px;
  color: #8f8f8f;
}
.systemSetup .content p {
  font-size: 12px;
  line-height: 25px;
  color: #8f8f8f;
}
</style>
